<template>
    <div class="header">
        <div class="mask">
            <div class="heaader-top">
                <img src="../../assets/img/header/header.jpg" alt="">
            </div>
            <ul class="header-list">
                <router-link tag="li" to="/home">
                    <i class="iconfont">&#xe61e;</i>
                    <span>首页</span>
                </router-link>
                <router-link tag="li" to="/source">
                    <i class="iconfont">&#xeeeb;</i>
                    <span>资源</span>
                </router-link>
                <router-link tag="li" to="/production">
                    <i class="iconfont">&#xe60b;</i>
                    <span>作品</span>
                </router-link>
                <router-link tag="li" to="/me">
                    <i class="iconfont">&#xe60b;</i>
                    <span>关于</span>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header"
    };
</script>
<style lang="less" scoped>
    .header {
        width: 100%;
        height: 100%;
        background: url("../../assets/img/header/header-left.jpg");
        background-size: cover;
        border: 1px solid white;
        box-sizing: border-box;
        .mask {
            width: 100%;
            height: 100%;
            background: rgba(82, 80, 80, 0.8);
            .header-logo {
                position: absolute;
                width: 100px;
                bottom: 5%;
                left: 50%;
                transform: translateX(-50%);
            }
            .heaader-top {
                border: 1px solid rgba(255,255,255,0);
                img {
                    width: 150px;
                    height: 150px;
                    display: block;
                    margin: 0px auto;
                    margin-top: 100px;
                    margin-bottom: 20px;
                    border-radius: 50%;
                    transition: transform 2s;

                    &:hover {
                        transform: rotate(360deg);
                    }
                }
            }

            .header-list {
                & > li {
                    height: 50px;
                    text-align: center;
                    align-items: center;
                    line-height: 50px;
                    cursor: pointer;
                    color: silver;
                    font-size: 20px;

                    &:hover {
                        color: white;
                    }

                    &.router-link-active {
                        color: white;
                    }

                    & > i {
                        font-size: 20px;
                        margin-right: 10px;
                    }
                }
            }

            .header-contact {
                display: flex;
                justify-content: space-around;
                margin: 30px 0;

                & > img {
                    display: block;
                    width: 35px;
                }
            }
        }
    }
</style>
